{% extends "ui/base-devices.html" %}

{% load url from future %}
{% load icons formats di staticfiles %}

{% block contentarea %}

<form class="form form-inline daterange-form">
<div class="form-actions">
    {% for f in form %}
        <div style="display:inline-block; vertical-align:top" class="control-group {% if f.errors %}error{% endif %}" >
            {{ f }}
            {% if f.errors %}
                <span class="help-block">
                    {% for e in f.errors %}{{ e }}{% endfor %}
                </span>
            {% endif %}
        </div>
    {% endfor %}
    <button type="submit" class="btn">{% spaceless %}
        {% icon 'fugue-calendar-search-result' %}&nbsp;Update
        {% endspaceless %}</button>
</div>
</form>
</div>
<div class="row-fluid">
<div class="span7">
<table class="table table-striped table-bordered table-condensed">
    <thead><tr>
        <th>Category</th>
        <th>Count now / in time range</th>
        <th>Total cost in time range</th>
    </tr></thead>
    <tbody>
        {% for i in items %}
        {% if i.name %}
        <tr>
            <td class="column-category">{{ i.name }}</td>
            <td class="column-count count">
              {% if i.url %}
                <a href="{{ i.url }}" class="badge badge-info">{{ i.count_now|default:"0" }}</a>
              {% else %}
                {% if i.count_now %}
                  <span class="badge nolink">{{i.count_now}}</span>
                {% endif %}
              {% endif %}
              {% if i.count %}
                {% if i.url or i.count_now %} / {% endif %}
                <span class="badge nolink">{{i.count|floatformat:2}}</span>
              {% endif %}
            </td>
            <td class="column-cost currency">{{ i.cost|currency }}</td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>
</div><div class="span5">
{% block info %}
{% extra_inclusion "ralph_obj_owner_table" venture %}
<table class="table table-striped table-bordered details-info-owners">
    <tbody>
        {% if venture.department %}
            <tr>
                <td>{{ venture|venture_icon }}</td>
                <td>{{ venture.department }}</td>
            </tr>
        {% endif %}
            <tr>
                <td>{% icon 'fugue-lighthouse' %}</td>
                <td>
                    <strong>business segment: </strong>
                    {{ venture.business_segment|default:"―" }}
                </td>
            </tr>
            <tr>
                <td>{% icon 'fugue-bank' %}</td>
                <td>
                    <strong>profit center: </strong>
                    {{ venture.profit_center|default:"―" }}
                </td>
            </tr>
    </tbody>
</table>
{% endblock %}
</div>


</div>
<div id="plot-placeholder" style="width:720px;height:300px">x</div>
<div class="row-fluid">

{% endblock %}

{% block scripts %}
{{ block.super }}
<script src="{% static 'jquery.flot.js' %}"></script>
<script>
$(function () {
    $.plot($('#plot-placeholder'), [
        {
            label: 'Daily total cost',
            color: '#08c',
            lines: { show: true, steps: true },
            points: { show: true, steps: true },
            data: {{ cost_data|safe }},
            yaxis: 1
        },
        {
            label: 'Device count',
            color: '#f62',
            lines: { show: true, steps: true },
            points: { show: true, steps: true },
            data: {{ count_data|safe }},
            yaxis: 2
        },
        {
            label: 'Cores count',
            color: '#6f2',
            lines: { show: true, steps: true },
            points: { show: true, steps: true },
            data: {{ cores_data|safe }},
            yaxis: 2
        },
        {
            label: 'Virtual cores count',
            color: '#62f',
            lines: { show: true, steps: true },
            points: { show: true, steps: true },
            data: {{ vcores_data|safe }},
            yaxis: 2
        }
    ], {
        xaxis: { mode: 'time' },
        legend: { position: 'sw' },
        yaxes: [
            { position: 'left', color: '#08c', min: 0 },
            { position: 'right', color: '#f62', min: 0 }
        ]
    });
});
</script>
{% endblock %}

